|
1.计算属性允许我们对指定的视图，复杂的值计算。这些值将绑定到依赖项值，只在需要时更新。 2.在Vue中计算属性是基于它们的依赖进行缓存的，而方法是不会基于它们的依赖进行缓存的。从而使用计算属性要比方法性能更好。
1.初步使用
computed
平均年龄为:{{avgAge}}
new Vue({
el: "#app",
data: {
message: "binge",
persons: [
{name: "张三", age: 18},
{name: "李四", age: 34},
{name: "王五", age: 56},
{name: "马六", age: 32},
{name: "赵七", age: 21}
]
},
computed: {
avgAge: function () {
let avgAge = 0;
for (let p of this.persons) {
avgAge += p.age;
}
return avgAge/this.persons.length;
}
}
})
2.get/set扩展
computed
平均年龄为:{{avgAge}}
new Vue({
el: "#app",
data: {
message: "binge",
persons: [
{name: "张三", age: 18},
{name: "李四", age: 34},
{name: "王五", age: 56},
{name: "马六", age: 32},
{name: "赵七", age: 21}
]
},
computed: {
avgAge: {
get: function () {
let avgAge = 0;
for (let p of this.persons) {
avgAge += p.age;
}
return avgAge / this.persons.length;
},
set: function () {
}
}
}
})
|